<template>
  <div class="myscroll">
    <vue-scroll :ops="ops" ref="vs">
      <slot></slot>
    </vue-scroll>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ops: {
        //vuescroll的配置
        vuescroll: {
          sizeStrategy: "percent",
          detectResize: true,
        },
        scrollPanel: {
          scrollingX: false,
        },
        rail: {},
        bar: {
          showDelay: 500,
          onlyShowBarOnScroll: false,
          keepShow: false,
          background: "#b3c0d1",
          hoverStyle: false,
          specifyBorderRadius: false,
          minSize: false,
          size: "6px",
          disable: false,
        },
      },
    }
  },
  props: ["distance", "opacity"],
  mounted() {
    // vuescroll的设定滚动的初始值
    this.ops.scrollPanel.initialScrollY = this.distance ? this.distance : 0
    this.ops.bar.opacity = this.opacity
  },
}
</script>
<style lang="scss" scoped>
.myscroll {
  width: 100%;
  height: 100%;
}
</style>
